<template>
  <div>
    <!-- 锚点导航栏（固定在右侧） -->
    <el-anchor :offset="20" class="anchor-menu" container="main-container"
      ><!-- 指定滚动容器（可选） -->
      <el-anchor-link href="#today-news" title="今日要闻" />
      <!-- <el-anchor-link href="#price-wave" title="价格波动" />
      <el-anchor-link href="#special-report" title="特色报告" /> -->
      <el-anchor-link href="#wheat" title="小麦频道" />
      <el-anchor-link href="#corn" title="玉米频道" />
      <el-anchor-link href="#rice" title="稻谷频道" />
      <el-anchor-link href="#oil" title="油脂油料频道" />
    </el-anchor>
    <div id="main-container">
      <!-- 今日要闻/粮网报告/今日行情 -->
      <el-row :gutter="7" id="today-news">
        <el-col :span="8">
          <div class="title">
            <div class="name">
              <div class="line"></div>
              今日要闻
            </div>
          </div>
          <!-- <Unit :breed="'1476452794433019906'"></Unit> -->
          <News />
        </el-col>
        <el-col :span="8">
          <div class="title">
            <div class="name">
              <div class="line"></div>
              <!-- 价格波动 -->
              农业综合信息
            </div>
            <div class="more">更多>></div>
          </div>
          <UnitD :breed="'1476452794433019906'"></UnitD>
        </el-col>
        <el-col :span="8">
          <div class="title">
            <div class="name">
              <div class="line"></div>
              特色报告
            </div>
            <div class="more">更多>></div>
          </div>
          <!-- <Unit :breed="'1476452794433019906'"></Unit> -->
          <ReportList></ReportList>
        </el-col>
      </el-row>
      <!-- 小麦频道 -->
      <div class="title" id="wheat">
        <div class="name">
          <div class="line"></div>
          小麦频道
        </div>
        <div class="more">进入小麦频道>></div>
      </div>
      <Wheat :breed="'1476451881127518210'"></Wheat>
      <!-- 玉米频道 -->
      <div class="title" id="corn">
        <div class="name">
          <div class="line"></div>
          玉米频道
        </div>
        <div class="more">进入玉米频道>></div>
      </div>
      <Wheat :breed="'1476452794433019906'"></Wheat>
      <!-- 稻谷频道 -->
      <div class="title" id="rice">
        <div class="name">
          <div class="line"></div>
          稻谷频道
        </div>
        <div class="more">进入稻谷频道>></div>
      </div>
      <Wheat :breed="'1463414115957198849'"></Wheat>
      <!-- 油脂油料频道 -->
      <div class="title" id="oil">
        <div class="name">
          <div class="line"></div>
          油脂油料频道
        </div>
        <div class="more">进入油脂油料频道>></div>
      </div>
      <Wheat :breed="'1463414446753566721'"></Wheat>
      <el-row :gutter="7" id="today-news">
        <el-col :span="8">
          <div class="title">
            <div class="name">
              <div class="line"></div>
              生猪频道
            </div>
            <div class="more">进入生猪频道>></div>
          </div>
          <Unit :breed="'1818469779819302914'"></Unit>
        </el-col>
        <el-col :span="8">
          <div class="title">
            <div class="name">
              <div class="line"></div>
              杂粮频道
            </div>
            <div class="more">进入杂粮频道>></div>
          </div>
          <Unit :breed="'1826903023413735426'"></Unit>
        </el-col>
        <el-col :span="8">
          <div class="title">
            <div class="name">
              <div class="line"></div>
              农业综合信息
            </div>
            <div class="more">进入综合频道>></div>
          </div>
          <Unit :breed="'1473819522890416129'"></Unit>
        </el-col>
      </el-row>
      <el-row :gutter="7">
        <el-col :span="16">
          <div class="title">
            <div class="name">
              <div class="line"></div>
              市场供求
            </div>
            <div class="more">更多>></div>
          </div>
          <SupplyDemandUnit />
        </el-col>
        <el-col :span="8">
          <div class="title">
            <div class="name">
              <div class="line"></div>
              热读推荐
            </div>
          </div>
          <RecommendNews />
        </el-col>
      </el-row>
      <el-row :gutter="7">
        <el-col :span="16">
          <div class="title">
            <div class="name">
              <div class="line"></div>
              会务/活动
            </div>
          </div>
          <Conference />
        </el-col>
        <el-col :span="8">
          <div class="title">
            <div class="name">
              <div class="line"></div>
              往期回顾
            </div>
            <div class="more">更多>></div>
          </div>
          <VideoList />
        </el-col>
      </el-row>
      <div class="title">
          <div class="name">
            <div class="line"></div>
            友情链接
          </div>
        </div>
        <LinkList />
    </div>
  </div>
</template>
 
<script setup>
// 可选的页面逻辑
</script>
 
<style lang="scss" scoped>
.title {
  margin: 5px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .name {
    font-size: 20px;
    font-weight: bold;
    color: #1a52a5;
    display: flex;
    align-items: center;
    .line {
      width: 3px;
      height: 14px;
      margin-right: 9px;
      background-color: #1a52a5;
    }
  }
  .more {
    font-size: 14px;
    color: #1a52a5;
    cursor: pointer;
  }
}
.ovo {
  height: 250px;
  background-color: #fafafa;
  .nav {
    width: 100%;
    height: 32px;
    background-color: #f0f6fa;
  }
}
/* 固定锚点菜单在右侧 */
  .anchor-menu {
    position: fixed;
    left: 100px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 999;
    background: #fff;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }
  // 锚点菜单样式
  :deep(.anchor-menu){
    font-size: 16px;
    .el-anchor__marker{
      background-color: #1a52a5;
    }
    .el-anchor__link{
      font-size: 16px;
    }
    .is-active{
      color: #1a52a5;
      font-weight: bold;
    }
  }
</style>